<template>
  <div class="admin-header">
    <el-breadcrumb separator="/" class="admin-breadcrumb">
      <el-breadcrumb-item>后台管理</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
        {{ item }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="header-actions">
      <div class="notification">
        <span class="icon">&#128276;</span>
        <span class="badge">107</span>
      </div>
      <div class="user-info">
        <span>admin</span>
        <span class="dropdown">▼</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed, ref, watch } from 'vue'

const route = useRoute()

// 路由路径与面包屑映射
const routeMapping: Record<string, string> = {
  'dashboard': '仪表盘',
  'content': '内容',
  'list': '管理',
  'publish': '发布',
  'edit': '编辑',
  'marketing': '营销',
  'statistics': '访问统计',
  'customerservice': '客服',
  'seo': 'SEO',
  'links': '友情链接',
  'appearance': '外观',
  'pc': 'PC端主题',
  'mobile': '移动端主题',
  'application': '应用',
  'myapps': '我的应用',
  'user': '用户',
  'member': '会员',
  'admin': '管理员',
  'security': '安全',
  'efficiency': '安全与效率',
  'backup': '备份与恢复',
  'settings': '设置',
  'base': '基本信息',
  'category': '栏目',
  'language': '语言',
  'thumbwatermark': '缩略图/水印'
}

// 计算面包屑项
const breadcrumbItems = computed(() => {
  const path = route.path
  const parts = path.split('/').filter(Boolean)
  
  // 如果不是admin路径，返回空数组
  if (!parts.length || parts[0] !== 'admin') {
    return []
  }
  
  // 从path解析出面包屑项
  return parts.slice(1).map(part => {
    // 处理动态参数 (如 edit/:id)
    if (part.includes(':')) {
      part = part.split(':')[0]
    }
    
    // 返回映射名称，如果没有则返回原名称
    return routeMapping[part] || part
  })
})
</script>

<style scoped>
.admin-header {
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.admin-breadcrumb {
  font-size: 17px;
}
:deep(.el-breadcrumb__inner) {
  font-weight: 500;
  color: #666;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #409eff;
  font-weight: 600;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.notification {
  position: relative;
  font-size: 20px;
  color: #409eff;
}
.badge {
  position: absolute;
  top: -8px;
  right: -16px;
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 12px;
}
.user-info {
  color: #333;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dropdown {
  font-size: 12px;
  color: #888;
}
</style> 